<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>excel文件比较</title>
    <script src="static/js/jquery.min.js"></script>
    <script src="static/js/jquery.form.js"></script>
</head>
<script type="text/javascript">
    $(function () {
        $("#commitBtn").click(function () {

            $("#commitBtn").attr("disabled",true);//设置为不可以再点击
            $("#spanId").css("display", "");

            $("#ajaxForm").ajaxSubmit(function (msg) {
                $("#commitBtn").attr("disabled",false);
                $("#spanId").css("display", "none");
                var obj = eval('(' + msg + ')');
                var resultMsg = obj.resultMsg;
                if ("SUCCESS" == resultMsg) {
                    console.log("成功");
                    var downLoadKey=obj.downKey;
                    window.location.href='/downloadFile?downLoadKey='+downLoadKey;
                }else{
                    alert("失败"+resultMsg);
                    console.log("失败");
                }

            });
            return false;
        });
    });

    function createDownForm() {
        var url="/downloadFile";
        // 构造隐藏的form表单
        var $form = $("<form id='download' style='display:none' class='formcss' method='post' target='myiframe'></form>");
        $form.attr("action",url);
        $("#form1").append($form);
        var $input = $("<input name='param3' type='submit'></input>");
        $input.attr("value","下载");
        $("#download").append($input);
        // 提交表单
        $form.submit();
    }

    function show(){
        $("#InstructionsForUse").css("display", "");
    }
    function hideShow(){
        $("#InstructionsForUse").css("display", "none");
    }
</script>
<body>
<div>
    <button onclick="show()">显示使用说明</button>    <button onclick="hideShow()">隐藏使用说明</button>
    <div id="InstructionsForUse" style="display: none">
        <h6>excel根据自定义主键比对，每一行，每一列数据，并给出不同的颜色标记</h6>
        <h6>1. 默认逐行，逐列的简单比较（不输入任何参数）。当两个excel条数和顺序完全一样时，可以不用输入任何参数比较</h6>
        <h6>2. 复杂关联比较。输入关联列名称，根据列名称匹配数据并比较。当两个excel乱序、条数不一致时使用。</h6>
        <span>输出结果说明</span>
    </div>
    <div>
        <form id="ajaxForm" method="POST" action="/fileUploadLocal" enctype="multipart/form-data" >
            <h3>excel表头组合关联查询，左连接+右连接(full join)</h3>
            列名称1: <input type="text" name="name">
            列名称2: <input type="text" name="name">
            列名称3: <input type="text" name="name"></br>
            列名称4: <input type="text" name="name">
            列名称5: <input type="text" name="name">
            列名称6: <input type="text" name="name"></br>
            列名称7: <input type="text" name="name">
            列名称8: <input type="text" name="name"></br>
            <h3>上传待比较excel文件</h3>
            文件1:<input type="file" title="" name="file1"/><br>
            文件2:<input type="file" title="" name="file2"/>
        </form>
        <h3>比较</h3>
       <!-- <input type="reset" value="重置"/>-->
        <button id="commitBtn" type="button">比较并下载比对结果</button><span id="spanId" style="display: none;color: red">处理中</span>
        <h3>差异和差集颜色说明</h3>
        <table   >
            <thead>
            <tr>
                <td  align='center' >
                    <input class="button button1"  type="button" style="background-color: #f44336; color: #e9e9e9;"  value="红色：不一致"/>
                </td>
                <td   align='center' >
                    <input class="button button2" type="button" style="background-color: #EE870D; color: #e9e9e9;" value="黄色：sheet2比sheet1多的数据"/>
                </td>
                <td  align='center' >
                    <input class="button button3" type="button" style="background-color: #B516EF; color: #e9e9e9;" value="粉色：sheet1比sheet2多的数据"/>
                </td>
                <td  align='center' >
                    <input class="button button3" type="button" style="background-color: #6be4ef; color: #e9e9e9;" value="天蓝色：只在sheet1有的表头"/>
                </td>
                <td  align='center' >
                    <input class="button button3" type="button" style="background-color: #205FDE; color: #e9e9e9;" value="蓝色：只在sheet2有的表头"/>
                </td>
            </tr>
            </thead>
        </table>
        <h3>效果图片</h3>
        <img src="/static/compareResult.jpg" alt="" width="1000" height="500">

    </div>

</div>

<iframe width=0 height=0 frameborder=0 id="myiframe" name="myiframe"></iframe>
</body>
</html>